<template>
	<view>
		<view class="header">
			
			<text id='title'>用水抄表</text>
		</view>
		
		<view >
			<view>
				<view class="information">
					<text>单位名称:</text>
					<text>{{showInfo.qy_name}}</text>
				</view>
				<view>
					<view class="information">
						<text>水表号:</text>
						<text>{{showInfo.cb_num}}</text>
						<text class="month">抄表月份:</text>
						<text>{{showInfo.cb_month}}</text>
					</view>
				</view>
				<view class="information">
					<text>抄表时间:</text>
					<text>{{showInfo.cb_time}}</text>
				</view>
			</view>
		</view>
		
		<view class="bz">
			<text>备注</text>
			<input type="text" :value="beizhu" />
		</view>
		
		<view>
			<view >
				<text>定位</text>
			</view>
			<view >
				<text>太仓市人民路</text>
			</view>
			<view class="adress">
				<text>地址:</text>
				<text>{{showInfo.cb_dizhi}}</text>
			</view>
			<view class="adress">
				<text>表况:</text>
				<text>{{showInfo.cb_biaokuang}}</text>
			</view>
			<view class="adress">
				<text>上传抄表日期:</text>
				<text>{{showInfo.cb_shangcitime}}</text>
			</view>
			<view class="adress">
				<text>上传抄表水量:</text>
				<text>15m</text>
			</view>
			<view class="adress">
				<text>正常用水范围:</text>
				<text>{{showInfo.cb_fanwei}}</text>
			</view>
			<view class="adress">
				<text>上传抄表数:</text>
				<text>3600</text>
			</view>
			<view class="adress">
				<text>本次抄表数:</text>
				<text>{{showInfo.cb_dushu}}</text>
			</view>
			<view class="adress">
				<text>水量:</text>
				<text>{{showInfo.cb_dushu}}</text>
			</view>
			<view>
				<text>现场照片</text>
				<view >
					<image src="../../static/logo.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import{ref,toRefs,reactive,onMounted,computed}from 'vue';
	import {mapState,useStore} from 'vuex';
	export default {
	setup(){
		const {state,getters,commit,dispatch}=useStore();
		let data=reactive({
			beizhu:'',
			showInfo:computed(()=>state.chaobiao.recordqueryInfo)
			
		});
		onMounted(()=>{
			// console.log(data.showInfo)
			data.beizhu=data.showInfo.cb_beizhu
		})
		return {...toRefs(data)}
	}
	}
</script>

<style>
	.bz{
		margin-top: 20rpx;
	}
.header {
		display: flex;
		justify-content: flex-start;
		width: 100%;
		height: 100rpx;

		align-items: center
	}

	

	#title {
		position: absolute;
		left: 295rpx;

	}
	.information{
		display: flex;
		justify-content:flex-start;
		border: 1rpx solid black;
		height: 80rpx;
		line-height: 80rpx;
	
	}
	.month{
		margin-left: 70rpx;
	}
	input{
		border: 1rpx solid black;
		border-radius: 10rpx;
		height: 100rpx;
		
		text-align: center;
		
	}
	image{
		height: 150rpx;
		width: 150rpx;
	}
	.adress{
		display: flex;
		justify-content:flex-start;
		border: 1rpx solid black;
		height: 80rpx;
	}
</style>
